<template>
  <!--  Done:选课开放时(isOpen为true)显示可选课程，否则显示“不在选课时间”-->
  <section v-if="!isOpen">
    <div>不在选课时间！</div>
  </section>
  <section v-else>
    <div class="course-table" >
<!--      <el-scrollbar style="height: 98%" >-->
<!--        <div class="course-table-content" >-->
<!--          <div class="top" style="width:98%">-->
<!--            <div v-for="item in weekTable" class="top-text" :style="{width: 100/7 + '%'}">周{{item}}</div>-->
<!--          </div>-->
<!--          <div class="main" :style="{ width:courseWidth * weekTable.length + 35 + 'px',height:courseHeight * timeTable.length +'px'}">-->
<!--            <div class="period">-->
<!--              <div v-for="item in timeTable" class="left-text" :style="{height: courseHeight + 'px'}">{{item}}</div>-->
<!--            </div>-->
<!--            &lt;!&ndash;课表&ndash;&gt;-->
<!--            <div v-for="(item,courseId) in CourseData">-->

<!--&lt;!&ndash;              注意这里的margin是用来定位的。&ndash;&gt;-->
<!--              <div class="flex-item kcb-item" @click="selectedCourseIndex = courseId;showUsualCourseDialog=true"-->

<!--                   :style="{            marginTop:(item.start-1) * courseHeight + 5+ 'px',-->
<!--                                        marginLeft:(item.day-1) * courseWidth + 'px',-->
<!--                                        width:courseWidth + 'px',-->
<!--                                        height:(item.end-item.start+1)* courseHeight +'px',-->
<!--                                        backgroundColor:colorArrays[courseId%9]}">-->
<!--                <div class="small-text" >{{item.name+'@'+item.room}}</div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </el-scrollbar>-->
      <el-dialog
          title="课程信息"
          :visible.sync="showUsualCourseDialog"
          width="30%"
          center>
        <div class="dialog-content">
          <div v-if="typeof(selectedCourse) != 'undefined'" >
            <div>课程名称： {{selectedCourse.name}}</div>
            <div>上课时间： {{selectedCourse.week + ' ' + '第' + selectedCourse.startTime + '-'+selectedCourse.endTime + '节'}}</div>
            <div>上课教师： {{selectedCourse.teacher}}</div>
            <div>上课地点： {{selectedCourse.room}}</div>
          </div>
          <div v-else class="tip" >本学期没有课哦</div>
        </div>
        <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="showUsualCourseDialog = false">确 定</el-button>
            </span>
      </el-dialog>
    </div>
    <div>
      <el-table :data="CourseData" border style="width: 98%" stripe>
        <el-table-column fixed prop="courseName" label="课程名" sortable/>
        <el-table-column fixed prop="courseNumber" label="课程编号"/>
        <el-table-column prop="schoolId" label="开课院系"/>
        <el-table-column prop="coursePeriod" label="学时"/>
        <el-table-column prop="courseCredit" label="学分"/>
        <el-table-column prop="workNumber" label="任课教师"/>
        <el-table-column prop="courseDesc" label="课程介绍"/>
        <el-table-column prop="start" label="上课时间"/>
        <el-table-column prop="classroom" label="上课地点"/>
        <el-table-column prop="courseCapacity" label="选课容量"/>
        <el-table-column fixed="right" label="操作" width="120">
          <template #default="scope">
            <el-button type="text" @click="handleDrop(scope.row.courseSerialNumber)">退课</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </section>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "CourseSelect",
  components:{
  },
  data(){
    return{
      isOpen:true,
      // CourseData:[
      //   {
      //     name:'软件工程',
      //     courseId:1,
      //     room:'3109',
      //     startTime:'1',
      //     endTime:'3',
      //     day:'3'
      //   },
      //   {
      //     name:'离散数学',
      //     courseId:2,
      //     room:'3106',
      //     startTime:'6',
      //     endTime:'7',
      //     day:'2'
      //   }
      // ],
      CourseData:[],
      showUsualCourseDialog:false,
      selectedCourseIndex:0,
    }
  },
  props:{
    width:{
      type:Number,
      default:1000
    },
    height:{
      type:Number,
      default:635
    },
    usualCourses:{
      type:Array,
      default:()=>[]
    },
    practiceCourses:{
      type:Array,
      default:()=>[]
    },
    weekTable:{
      type:Array,
      default:()=>['一','二','三','四','五','六','日']
    },
    timeTable:{
      type:Array,
      default:()=>[1,2,3,4,5,6,7,8,9,10,11,12,13]
    },
    colorArrays: {
      type:Array,
      default:()=>['#ef5b9c','#f15b6c', '#f26522', '#ffd400', '#8552a1', '#7fb80e', '#65c294', '#78cdd1', '#33a3dc']
    }
  },
  computed:{
    courseWidth(){
      return Math.max(this.width / this.weekTable.length,50)
    },
    courseHeight(){
      return Math.max((this.height - 100) / this.timeTable.length,35)
    },
    selectedCourse(){
      return this.usualCourses[this.selectedCourseIndex];
    }
  },
  mounted(){

  },
  created() {
    this.load()
    console.log(this.courseWidth)
    console.log(this.width)
    console.log(this.weekTable.length)

  },
  methods:{
    load(){

      // request.get("http://localhost:8082/openCourseSelection").then(res => {
      //   this.isOpen = res.data.course_open;
      // })
      //
      // request.get("http://localhost:8082/selCourse/allCompletedList?stunum="+localStorage.getItem('userid')).then(res => {
      //   this.CourseData = res.data
      // })

      request.get("http://124.70.179.188:8082/selCourse/completedList?stunum="+localStorage.getItem('userid')).then(res => {
        this.CourseData = res.data
      })

    },
    handleDrop(cid){
      request.post("http://124.70.179.188:8082/selCourse/dropCourse?cid="+cid+"&stunum="+localStorage.getItem('userid')).then(res => {
        this.CourseData = res.data
        this.load()
      })
    }
  },
}
</script>

<style scoped>
.course-table{
  border-radius: 12px;
}
.top {
  display: flex;
  flex-direction: row;
  padding-left: 35px;
  background-color: #31c27c;
  color: #fff;
}
.top-text {
  width: 100px;
  height: 35px;
  font-size: 20px;
  justify-content: center;
  display: flex;
  align-items: center;
}
.main{
  height:800px;
  width:1200px;
  display:flex;
  position: relative;
}
.flex-item {
  width: 200px;
  height: 95px;
}
.kcb-item {
  position: absolute;
  justify-content: center;
  display: flex;
  align-items: center;
  border-radius: 12px;
  overflow: hidden;
}
.period{
  background-color:#31c27c;
  color:#fff;
}
.small-text {
  font-size: 15px;
  color: #fff;
  text-align: center;
}
.left-text {
  width: 35px;
  height: 100px;
  font-size:20px;
  justify-content: center;
  display: flex;
  align-items: center;
}
.btn_practice_course{
  position: absolute;
  z-index: 110;
  top: 35px;
  right: 0px;
  width: 100px;
  height: 100px;
  line-height: 24px;
  background: #31c27c;
  border-radius: 50px;
  font-size: 24px;
  text-align: center;
  color: #fff;
  opacity: 0.7;
  padding: 12px;
}
.el-dialog .dialog-content{
  color: #000;
  line-height: 60px;

}
.el-dialog .dialog-content .tip{
  color: #000;
  line-height: 60px;
  text-align: center;
}
</style>